<!-- 商品列表模块 -->
<template>
    <div class="goods_list">

        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 内容展示卡片区域 -->
        <el-card>
            <!-- 功能区域 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <!-- input双向绑定queryinfo查询数据，后面可以直接用queryinfo查询数据 -->
                    <el-input placeholder="请输入搜索内容" class="input-with-select" clearable v-model="queryInfo.query"
                        @clear="getGoodsList">
                        <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="addGoodsVisiable = true">添加商品</el-button>
                </el-col>
            </el-row>

            <!-- 添加商品对话框 -->
            <el-dialog title="添加商品" :visible.sync="addGoodsVisiable" width="30%">
                
                <el-form ref="form" :model="addGoodsData" label-width="80px">
                <el-form-item label="商品名称">
                    <el-input v-model="addGoodsData.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="商品分类">
                    <el-cascader v-model="selectCate" :options="cateList" :props="cascaderProps" @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="addGoodsData.goods_price"></el-input>
                </el-form-item>
                <el-form-item label="商品数量">
                    <el-input v-model="addGoodsData.goods_number"></el-input>
                </el-form-item>
                <el-form-item label="商品重量">
                    <el-input v-model="addGoodsData.goods_weight"></el-input>
                </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="addGoodsVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="submitAddGoods">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 编辑商品对话框 -->
            <el-dialog title="编辑商品" :visible.sync="updateGoodsVisiable" width="30%">
                
                <!-- <el-form :model="updateGoodsReq" label-width="80px">
                <el-form-item label="商品名称">
                    <el-input v-model="updateGoodsReq.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="updateGoodsReq.goods_price"></el-input>
                </el-form-item>
                <el-form-item label="商品分类">
                    <el-cascader v-model="selectCate" :options="cateList" :props="cascaderProps" @change="handleChange">
                </el-cascader>
                </el-form-item>
                <el-form-item label="商品数量">
                    <el-input v-model="updateGoodsReq.goods_number"></el-input>
                </el-form-item>
                <el-form-item label="商品重量">
                    <el-input v-model="updateGoodsReq.goods_weight"></el-input>
                </el-form-item>
                </el-form> -->

                <!-- <span slot="footer" class="dialog-footer">
                    <el-button @click="updateGoodsVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="submitUpdateGoodsData">确 定</el-button>
                </span> -->
            </el-dialog>


            <!-- 表格内容区域 -->
            <el-table :data="goodsListData" style="width: 100%" border>
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column property="goods_name" label="商品名称" width="600px">
                </el-table-column>
                <el-table-column property="goods_price" label="商品价格（元）">
                </el-table-column>
                <el-table-column property="goods_weight" label="商品重量">
                </el-table-column>
                <el-table-column property="add_time" label="创建时间" width="200px">
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <!-- <el-button type="primary" @click="updateGoodsData(scope.row.goods_id)"><i class="el-icon-edit"></i></el-button> -->
                        <el-button type="primary"><i class="el-icon-edit"></i></el-button>
                        <el-button type="danger" @click="deleteGoods(scope.row.goods_id)"><i class="el-icon-delete"></i></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页功能 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        created() {
            this.getGoodsList()
            this.getCateList()
        },
        data() {
            return {
                queryInfo: {
                    //query:查询参数
                    query: '',
                    //pagenum:当前页码
                    pagenum: 1,
                    //每页显示条数
                    pagesize: 10
                },
                //查询到的总条目数量
                total: 0,
                //商品列表数据
                goodsListData: [],
                //添加商品数据
                addGoodsData: {
                    //商品名称
                    goods_name: '',
                    //商品分类
                    goods_cat: '',
                    //商品价格
                    goods_price: '',
                    //商品数量
                    goods_number:'',
                    //商品重量
                    goods_weight: ''
                },
                //是否显示添加商品对话框
                addGoodsVisiable:false,
                //级联选择器选中的信息
                selectCate: [],
                cateList: [],
                cascaderProps: {
                    expandTrigger: 'hover',
                    label: 'cat_name',
                    value: 'cat_id',
                    children: 'children'
                },

                //修改商品数据ID
                updateGoodsId:'',
                //是否显示编辑商品对话框
                updateGoodsVisiable:false,
                //提交修改的商品数据
                updateGoodsReq:{
                    //商品名称
                    goods_name: '',
                    //商品价格
                    goods_price: '',
                    //商品数量
                    goods_number:'',
                    //商品重量
                    goods_weight: '',
                    goods_cat:''
                }
            }
        },
        methods: {
            //获取表格数据
            async getGoodsList() {
                const {
                    data: res
                } = await this.$http.get('goods', {
                    params: this.queryInfo
                })
                if (res.meta.status !== 200) {
                    return this.$message.error('数据加载出错了')
                }
                //将查询到的总条目数量和商品列表数据赋值
                this.goodsListData = res.data.goods
                console.log(this.goodsListData)
                this.total = res.data.total
                this.goodsListData.forEach(item=>{
                    item.add_time = new Date(parseInt(item.add_time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ')
                })
            },
            //添加商品
            async submitAddGoods(){
                this.addGoodsData.goods_cat = this.selectCate.toString()
                console.log(this.addGoodsData);
                const {data:res} = await this.$http.post('goods',this.addGoodsData)
                console.log(res)
                if(res.meta.status!==201){
                    return this.$message.error('添加商品失败！')
                }
                this.$message.success('添加商品成功！')
                this.getGoodsList()
                this.addGoodsVisiable = false
            },
            //改变级联选择器选中对象
            handleChange() {
                console.log(this.selectCate.toString());
            },            
            //获取分类数据
            async getCateList() {
                const {
                    data: res
                } = await this.$http.get('categories')
                if (res.meta.status !== 200) {
                    return this.$message.erorr('获取分类数据失败')
                }
                this.cateList = res.data
            },
            //修改商品数据
            // updateGoodsData(upId){
            //     this.updateGoodsId = upId
            //     this.updateGoodsVisiable = true
            // },
            // async submitUpdateGoodsData(){
            //     this.updateGoodsReq.goods_cat = this.selectCate.toString()
            //     console.log(this.updateGoodsReq)
            //     const {data:res} = await this.$http.put(`goods/${this.updateGoodsId}`,this.updateGoodsReq)
            //     console.log(res)
            //     if(res.meta.status!==201){
            //         return this.$message.error('修改商品数据失败！')
            //     }
            //     this.$message.success('修改商品数据成功！')
            //     this.getGoodsList()
            //     console.log(this.updateGoodsReq)
            // }
            async deleteGoods(delId){
                const {data:res} =await this.$http.delete(`goods/${delId}`)
                if(res.meta.status!==200){
                    return this.$message.error('删除商品信息失败！')
                }
                this.$message.success('删除用户信息成功！')
                this.getGoodsList()
            },
            //分页
            handleSizeChange(size){
                this.queryInfo.pagesize = size
                this.getGoodsList()
            },
            handleCurrentChange(current){
                this.queryInfo.pagenum = current
                this.getGoodsList()
            }
        }
    }
</script>
<style scoped>
    /* @import url(); 引入css类 */
</style>